<template>
  <PageWrapper
    :title="`模块：` + detail.name"
    :content="`描述：` + detail.intro"
    contentBackground
    @back="goBack"
  >
    <div>
      <BasicTable @register="registerTable">
        <template #toolbar>
          <a-button type="primary" @click="handleSyncArticle">同步最新</a-button>
        </template>
        <template #action="{ record }">
          <TableAction
            :actions="[
              {
                label: '删除',
                icon: 'ant-design:delete-outlined',
                color: 'error',
                onClick: handleDelete.bind(null, record),
              },
            ]"
          />
        </template>
        <template #image="{ record }">
          <div class="article-image">
            <Image :height="50" :src="record.cover" />
          </div>
        </template>
        <template #module="{ record }">
          {{ record.module.website.name + ' - ' + record.module.name }}
        </template>
        <template #link="{ record }">
          <a :href="record.url" target="_blank" rel="noreferrer">{{ record.title }}</a>
        </template>
      </BasicTable>
    </div>
  </PageWrapper>
</template>
<script lang="ts">
  import { defineComponent, onMounted, ref } from 'vue';
  import { Image } from 'ant-design-vue';
  import { useRoute } from 'vue-router';
  import { PageWrapper } from '/@/components/Page';
  import { useGo } from '/@/hooks/web/usePage';
  import { useTabs } from '/@/hooks/web/useTabs';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { ModuleDetail, getArticleList, syncArticle } from '/@/api/demo/media';

  import { columns, searchFormSchema } from './data';

  export default defineComponent({
    name: 'MediaModuleArticleList',
    components: { PageWrapper, BasicTable, TableAction, Image },
    setup() {
      const route = useRoute();
      const go = useGo();
      const { setTitle } = useTabs();
      const { createMessage } = useMessage();
      const params = ref(route.params);
      const detail = ref<Recordable>({});

      const [registerTable, { reload }] = useTable({
        title: '模块文章',
        api: getArticleList,
        rowKey: 'id',
        columns,
        formConfig: {
          labelWidth: 120,
          schemas: searchFormSchema,
          autoSubmitOnEnter: true,
        },
        useSearchForm: true,
        showTableSetting: true,
        bordered: true,
        showIndexColumn: true,
        searchInfo: {
          module_id: params.value.id,
        },
      });

      console.log(route.params);

      onMounted(async () => {
        const res = await ModuleDetail({ id: params.value.id });
        detail.value = res.row;
        detail.value.name = detail.value.website.name + ' - ' + detail.value.name;
        setTitle(detail.value.name);
        console.log(detail);
      });

      async function handleSyncArticle() {
        console.log('同步文章');
        await syncArticle({ module_id: params.value.id });
        createMessage.loading('同步中，请稍后', function () {
          reload();
        });
      }
      function goBack() {
        // 本例的效果时点击返回始终跳转到账号列表页，实际应用时可返回上一页
        go('/media/module');
      }

      return {
        params,
        detail,
        registerTable,
        handleSyncArticle,
        goBack,
      };
    },
  });
</script>
